
<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Introduction · vue-loader</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.3">




    <link rel="stylesheet" href="../gitbook/style.css">




    <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css">























    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">




</head>
<body>

<section class="normal markdown-section">

    <h1 id="&#x4ECB;&#x7ECD;">&#x4ECB;&#x7ECD;</h1>
    <h3 id="vue-loader-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">Vue Loader &#x662F;&#x4EC0;&#x4E48;&#xFF1F;</h3>
    <p><code>vue-loader</code> &#x662F;&#x4E00;&#x4E2A; webpack &#x7684; loader&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;&#x7528;&#x4E0B;&#x9762;&#x8FD9;&#x4E2A;&#x683C;&#x5F0F;&#x7F16;&#x5199;&#x7684; Vue &#x7EC4;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A; JavaScript &#x6A21;&#x5757;&#xFF1A;</p>
    <p><img src="http://blog.evanyou.me/images/vue-component.png" alt="screenshot"></p>
    <p>&#x8FD9;&#x91CC;&#x6709;&#x4E00;&#x4E9B; <code>vue-loader</code> &#x63D0;&#x4F9B;&#x7684;&#x5F88;&#x9177;&#x7684;&#x7279;&#x6027;&#xFF1A;</p>
    <ul>
        <li>&#x9ED8;&#x8BA4;&#x652F;&#x6301; ES2015&#xFF1B;</li>
        <li>&#x5141;&#x8BB8;&#x5BF9; Vue &#x7EC4;&#x4EF6;&#x7684;&#x7EC4;&#x6210;&#x90E8;&#x5206;&#x4F7F;&#x7528;&#x5176;&#x5B83; webpack loader&#xFF0C;&#x6BD4;&#x5982;&#x5BF9; <code>&lt;style&gt;</code> &#x4F7F;&#x7528; Sass &#x548C;&#x5BF9; <code>&lt;template&gt;</code> &#x4F7F;&#x7528; Jade&#xFF1B;</li>
        <li><code>.vue</code> &#x6587;&#x4EF6;&#x4E2D;&#x5141;&#x8BB8;&#x81EA;&#x5B9A;&#x4E49;&#x8282;&#x70B9;&#xFF0C;&#x7136;&#x540E;&#x4F7F;&#x7528;&#x81EA;&#x5B9A;&#x4E49;&#x7684; loader &#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF1B;</li>
        <li>&#x628A; <code>&lt;style&gt;</code> &#x548C; <code>&lt;template&gt;</code> &#x4E2D;&#x7684;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x5F53;&#x4F5C;&#x6A21;&#x5757;&#x6765;&#x5BF9;&#x5F85;&#xFF0C;&#x5E76;&#x4F7F;&#x7528; webpack loader &#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF1B;</li>
        <li>&#x5BF9;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x6A21;&#x62DF;&#x51FA; CSS &#x4F5C;&#x7528;&#x57DF;&#xFF1B;</li>
        <li>&#x652F;&#x6301;&#x5F00;&#x53D1;&#x671F;&#x7EC4;&#x4EF6;&#x7684;&#x70ED;&#x91CD;&#x8F7D;&#x3002;</li>
    </ul>
    <p>&#x7B80;&#x800C;&#x8A00;&#x4E4B;&#xFF0C;&#x7F16;&#x5199; Vue.js &#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x65F6;&#xFF0C;&#x7EC4;&#x5408;&#x4F7F;&#x7528; webpack &#x548C; <code>vue-loader</code> &#x80FD;&#x5E26;&#x6765;&#x4E00;&#x4E2A;&#x73B0;&#x4EE3;&#xFF0C;&#x7075;&#x6D3B;&#x5E76;&#x4E14;&#x975E;&#x5E38;&#x5F3A;&#x5927;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B;&#x3002;</p>
    <h3 id="webpack-&#x662F;&#x4EC0;&#x4E48;">webpack &#x662F;&#x4EC0;&#x4E48;?</h3>
    <p>&#x5982;&#x679C;&#x4F60;&#x5DF2;&#x7ECF;&#x719F;&#x6089;&#x4E86; webpack&#xFF0C;&#x968F;&#x65F6;&#x53EF;&#x4EE5;&#x8DF3;&#x8FC7;&#x4E0B;&#x9762;&#x7684;&#x8BF4;&#x660E;&#x3002;&#x5982;&#x679C;&#x4F60;&#x6CA1;&#x6709;&#x4F7F;&#x7528;&#x8FC7; webpack&#xFF0C;&#x4E0B;&#x9762;&#x662F;&#x4E00;&#x4E2A;&#x5FEB;&#x901F;&#x4ECB;&#x7ECD;&#xFF1A;</p>
    <p><a href="https://webpack.github.io/" target="_blank">webpack</a> &#x662F;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x6253;&#x5305;&#x5DE5;&#x5177;&#x3002;&#x5B83;&#x5C06;&#x4E00;&#x5806;&#x6587;&#x4EF6;&#x4E2D;&#x7684;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x90FD;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#xFF0C;&#x627E;&#x51FA;&#x5B83;&#x4EEC;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#xFF0C;&#x5C06;&#x5B83;&#x4EEC;&#x6253;&#x5305;&#x4E3A;&#x53EF;&#x90E8;&#x7F72;&#x7684;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x3002;</p>
    <p><img src="https://webpack.github.io/assets/what-is-webpack.png" alt="webpack"></p>
    <p>&#x4E00;&#x4E2A;&#x57FA;&#x672C;&#x7684;&#x4F8B;&#x5B50;&#xFF0C;&#x60F3;&#x50CF;&#x6211;&#x4EEC;&#x6709;&#x4E00;&#x4E9B; CommonJS &#x6A21;&#x5757;&#xFF0C;&#x5B83;&#x4EEC;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x8FD0;&#x884C;&#xFF0C;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x6253;&#x5305;&#x6210;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;&#x8FD9;&#x6837;&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; <code>&lt;script&gt;</code> &#x6807;&#x7B7E;&#x52A0;&#x8F7D;&#x3002;webpack &#x53EF;&#x4EE5;&#x9075;&#x5FAA; <code>require()</code> &#x8C03;&#x7528;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#xFF0C;&#x4E3A;&#x6211;&#x4EEC;&#x5B8C;&#x6210;&#x8FD9;&#x4E9B;&#x5DE5;&#x4F5C;&#x3002;</p>
    <p>&#x4F46;&#x662F; webpack &#x53EF;&#x4EE5;&#x505A;&#x7684;&#x4E0D;&#x6B62;&#x8FD9;&#x4E9B;&#x3002;&#x901A;&#x8FC7;&#x201C;loader&#x201D;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x914D;&#x7F6E; webpack &#x4EE5;&#x4EFB;&#x4F55;&#x65B9;&#x5F0F;&#x53BB;&#x8F6C;&#x6362;&#x6240;&#x6709;&#x7C7B;&#x578B;&#x7684;&#x6587;&#x4EF6;&#x3002;&#x5305;&#x62EC;&#x4EE5;&#x4E0B;&#x4F8B;&#x5B50;&#xFF1A;</p>
    <ul>
        <li>&#x8F6C;&#x6362; ES2015&#xFF0C;CoffeeScript &#x6216;&#x8005; TypeScript &#x6A21;&#x5757;&#x4E3A;&#x666E;&#x901A;&#x7684; ES5 CommonJS &#x6A21;&#x5757;&#xFF1B;</li>
        <li>&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x5728;&#x7F16;&#x8BD1;&#x4E4B;&#x524D;&#x68C0;&#x9A8C;&#x4F60;&#x7684;&#x6E90;&#x4EE3;&#x7801;&#xFF1B;</li>
        <li>&#x5C06; Jade &#x6A21;&#x7248;&#x8F6C;&#x6362;&#x4E3A;&#x7EAF; HTML &#x5E76;&#x4E14;&#x5D4C;&#x5165; Javascript &#x5B57;&#x7B26;&#x4E32;&#x4E2D;&#xFF1B;</li>
        <li>&#x5C06; Sass &#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;&#x7EAF; CSS&#xFF0C;&#x7136;&#x540E;&#x5C06;&#x5176;&#x8F6C;&#x6362;&#x6210; JavaScript &#x7247;&#x6BB5;&#xFF0C;&#x5C06;&#x751F;&#x6210;&#x7684; CSS &#x4F5C;&#x4E3A; <code>&lt;style&gt;</code> &#x6807;&#x7B7E;&#x63D2;&#x5165;&#x9875;&#x9762;&#xFF1B;</li>
        <li>&#x5904;&#x7406; HTML &#x6216;&#x8005; CSS &#x4E2D;&#x5F15;&#x7528;&#x7684;&#x56FE;&#x7247;&#xFF0C;&#x79FB;&#x52A8;&#x5230;&#x914D;&#x7F6E;&#x7684;&#x8DEF;&#x5F84;&#x4E2D;&#xFF0C;&#x5E76;&#x4E14;&#x4F7F;&#x7528; md5 hash &#x91CD;&#x547D;&#x540D;&#x3002;</li>
    </ul>
    <p>&#x5F53;&#x4F60;&#x7406;&#x89E3; webpack &#x539F;&#x7406;&#x540E;&#x4F1A;&#x611F;&#x89C9;&#x5B83;&#x662F;&#x5982;&#x6B64;&#x5F3A;&#x5927;&#xFF0C;&#x5B83;&#x53EF;&#x4EE5;&#x5927;&#x5927;&#x4F18;&#x5316;&#x4F60;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B;&#x3002;&#x5B83;&#x4E3B;&#x8981;&#x7684;&#x7F3A;&#x70B9;&#x662F;&#x914D;&#x7F6E;&#x590D;&#x6742;&#x9EBB;&#x70E6;&#xFF0C;&#x4F46;&#x662F;&#x4F7F;&#x7528;&#x672C;&#x6307;&#x5357;&#xFF0C;&#x5E94;&#x8BE5;&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x4F60;&#x627E;&#x5230; Vue.js &#x548C; <code>vue-loader</code> &#x4F7F;&#x7528;&#x65F6;&#x7684;&#x6700;&#x5E38;&#x89C1;&#x95EE;&#x9898;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;</p>


</section>


</body>
</html>

